---
import { generateLinks, generateMetaTags, generateSocialImage } from '@/utils/seo';
import config from '@/config';

const { frontmatter } = Astro.props;

const title = frontmatter?.title || 'VeeValidate: Painless Vue.js forms';
const description = frontmatter?.description || 'Painless Vue.js forms';
const path = frontmatter?.url || '/v4/';
const image = generateSocialImage({
  title: title,
  tagline: description,
  imagePublicID: 'open-source/vee-validate-share.png',
});

const metaTags = generateMetaTags({
  title,
  description,
  url: `${config.appURL}${path}`,
  image,
});

const links = generateLinks({
  url: `${config.appURL}${path}`,
});
---

<head>
  <title>{title}</title>
  <meta charset="utf-8" />
  <link rel="icon" type="image/x-icon" href="/v4/img/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  {metaTags.map(t => <meta content={t.content} name={t.name} property={t.property} />)}
  {links.map(t => <link href={t.href} rel={t.rel} />)}
  <script is:inline src="/v4/loadTheme.js"></script>
  <script type="text/partytown" src="https://www.googletagmanager.com/gtag/js?id=G-T7VXTJ0MFH"></script>
  <script type="text/partytown">
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());

    gtag('config', 'G-T7VXTJ0MFH');
  </script>
</head>
